<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<style type="text/css">
    /*按钮*/
    .icon_div a {
        display: inline-block;
        width: 27px;
        height: 20px;
        cursor: pointer;
    }

    /*end--按钮*/

    /*ztree表格*/
    .ztree * {
        font-family: 'Glyphicons Halflings', 'FontAwesome';
    }

    .panel {
        padding: 0;
        border-color: #ccc;
        min-width: 800px;
    }

    /*.ztree {
        padding: 0;
        border: 1px solid #ccc;
        min-width: 800px;
    }*/

    .ztree li a {
        vertical-align: middle;
        height: 30px;
        color: #3c8dbc;
    }

    .ztree li > a {
        width: 100%;
    }

    .ztree li > a,
    .ztree li a.curSelectedNode {
        padding-top: 0px;
        background: none;
        height: auto;
        border: none;
        cursor: default;
        opacity: 1;
    }

    .ztree li ul {
        padding-left: 0px
    }

    .ztree div.diy span {
        vertical-align: middle;
    }

    .ztree div.diy {
        height: 100%;
        width: 11.72%;
        line-height: 35px;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
        color: #6c6c6c;
        font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", "Droid Sans", "Source Han Sans", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
        font-size: 12px;
        /*超出部分省略号*/
        overflow: auto;
        /*text-overflow: ellipsis;*/
        white-space: nowrap;
    }

    .ztree div.diy:first-child {
        text-align: left;
        text-indent: 10px;
        border-left: none;
    }

    .ztree .head {
        background: #f8f8f8;
    }

    .ztree li {
        line-height: 0px;
    }

    .ztree .head div.diy {
        border-top: none;
        /*border-right: 1px solid #CDD2D4;*/
        /*color: #fff;*/
        font-family: "Microsoft YaHei";
        font-size: 14px;
    }

    span[treenode_ico] {
        position: relative;
        top: 8px;
    }

    /* Hover effect */
    .ztree li:hover > a {
        background-color: #f0f0f0;
    }

    .btn-group {
        text-align: center;
        line-height: 25px;
    }

    .btn-group > a {
        padding-left: 10px;
    }

    .box-body {
        overflow: auto;
    }

    /*end--ztree表格*/
</style>
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        产品目录管理
        <small>产品目录管理的页面</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">产品目录管理</a></li>
        <li class="active">产品目录管理</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <!-- Default box -->
            <div class="box">
                <div class="box-header with-border">
                    <div class="btn-group-sm" role="group">
                        <button type="button" class="btn btn-default" name="refresh" title="刷新"
                                onclick="javascript:$.myAdmin.refreshContent();">
                            <i class="glyphicon glyphicon-refresh icon-refresh"></i>
                            刷新
                        </button>
                    </div>

                </div>
                <div class="box-body">
                    <div id="tableMain">
                            <!--1、ztree用法首先页面上定义ul标签-->
                            <ul id="dataTree" class="ztree panel">

                        </ul>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
    <!-- /.box -->
</section>

<!-- add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">添加目录</h4>
            </div>
            <div class="modal-body">
                <form id="addForm" onsubmit="return false;">
                    <input type="hidden" name="parentId" required/>
                    <input type="hidden" name="parentIds" />
                    <div class="form-group">
                        <label class="control-label" for="parentName">上级目录:</label>
                        <input type="text" class="form-control" id="parentName" name="parentName" placeholder="上级目录不存在"
                               readonly required/>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="name"><span class="asterisk">*</span>产品目录:</label>
                        <input type="text" class="form-control" name="name" id="name" placeholder="产品目录" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label>产品状态</label>
                        <div class="radio">
                            <label>
                                <input type="radio" name="up" id="statusoptionsRadios1" value="1" checked>上线
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="up" id="statusoptionsRadios2" value="0"> 下线
                            </label>
                        </div>
                    </div>
                     <div class="form-group">
                         <input type="hidden" id="groupJson" name="groupJson">
                         <label class="col-sm-3 control-label" for="groupnames"><span class="asterisk">*</span>产品属性组:</label>
                         <div class="col-sm-4">
                             <select class="form-control select2" id="groupnames" name="groupnames">
                                 <option value="0" text="选择属性">选择属性</option>
                                 <option th:each="group : ${groups}" th:value="${group.id}" th:text="${group.groupName}">属性不存在</option>
                             </select>
                         </div>
                         <div class="col-sm-5 col-sm-push-3">
                             <button type="button" class="btn btn-info btn-flat"  id="addGroup" onclick=addgroup("")>添加</button>
                         </div>
                     </div>
                    <div class="form-group">
                        <label class="control-label" id="grouplabeles"></label>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="sortOrder">排序:</label>
                        <input type="number" class="form-control" name="sortOrder" id="sortOrder" placeholder="目录排序">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="addForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#addForm',url:'@{/itemcat/create}',after:'$.myAction.refreshContent'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">修改类型</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" onsubmit="return false;">
                    <input type="hidden" name="id" required/>
                    <input type="hidden" name="parentId" required/>
                    <input type="hidden" name="parentIds" />
                    <div class="form-group">
                        <label class="control-label" for="parentName">上级目录:</label>
                        <input type="text" class="form-control" id="editparentName" name="parentName" placeholder="上级目录不存在"
                               readonly required/>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="name"><span class="asterisk">*</span>产品目录:</label>
                        <input type="text" class="form-control" name="name" id="editname" placeholder="产品目录" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label>产品状态</label>
                        <div class="radio">
                            <label>
                                <input type="radio" name="up" id="editstatusoptionsRadios1" value="1" checked>上线
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="up" id="editstatusoptionsRadios2" value="0"> 下线
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="hidden" id="editgroupJson" name="groupJson">
                        <label class="col-sm-3 control-label" for="groupnames"><span class="asterisk">*</span>产品属性组:</label>
                        <div class="col-sm-4">
                            <select class="form-control select2" id="editgroupnames" name="groupnames">
                                <option value="0" text="选择属性">选择属性</option>
                                <option th:each="group : ${groups}" th:value="${group.id}" th:text="${group.groupName}">属性不存在</option>
                            </select>
                        </div>
                        <div class="col-sm-5 col-sm-push-3">
                            <button type="button" class="btn btn-info btn-flat"  id="editGroup" onclick=addgroup("edit")>添加</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" id="editgrouplabeles" name="editgrouplabeles"></label>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="sortOrder">排序:</label>
                        <input type="number" class="form-control" name="sortOrder" id="editsortOrder" placeholder="目录排序">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="addForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#editForm',url:'@{/itemcat/update}',after:'$.myAction.refreshContent'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- delete modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteSmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteSmallModalLabel">删除目录</h4>
            </div>
            <div class="modal-body">
                <form id="deleteForm">
                    <input type="hidden" name="id">
                    <input type="hidden" name="parentId">
                </form>
                确定要删除该资源?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" form="deleteForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#deleteForm',url:'@{/itemcat/delete}',after:'$.myAction.refreshContent'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<!--搜索下面的功能键-->
<dev id="actionButtons" class="admin-hide">
    <div class="btn-group">
        <a class="like" href="javascript:void(0)" data-toggle="tooltip" title="查看"><i
                class="glyphicon glyphicon-heart"></i></a>　
        <a shiro:hasPermission="itemcat:create" class="add ml10" href="javascript:void(0)" data-toggle="tooltip"
           title="" data-original-title="新增"><i
                class="glyphicon glyphicon-plus"></i></a>　
        <a shiro:hasPermission="itemcat:update" class="edit ml10" href="javascript:void(0)" data-toggle="tooltip"
           title="" data-original-title="修改"><i
                class="glyphicon glyphicon-edit"></i></a>　
        <a shiro:hasPermission="itemcat:delete" class="delete ml10" href="javascript:void(0)" data-toggle="tooltip"
           title="" data-original-title="删除"><i
                class="glyphicon glyphicon-remove"></i></a>　
    </div>
</dev>

<!-- /.content -->
<!--th:inline,处理每一行的数据-->
<script th:inline="javascript" type="text/javascript">
    var groupJson = [];
    var like, createChild, update, remove;
    $(function () {
        like = function (tId) {
            var treeObj = $.fn.zTree.getZTreeObj("dataTree");
            var node = treeObj.getNodeByTId(tId);
            console.log(node);
            alert(JSON.stringify(node));
        }
        createChild = function (tId) {
            var treeObj = $.fn.zTree.getZTreeObj("dataTree");
            var node = treeObj.getNodeByTId(tId);
            $('#addForm [name="parentId"]').val(node.id);
            $('#addForm [name="parentName"]').val(node.name);
            $('#addForm [name="groupnames"]').val(node.groupnames);
            $('#addModal').modal('show');
        };

        update = function (tId) {
            var treeObj = $.fn.zTree.getZTreeObj("dataTree");
            var node = treeObj.getNodeByTId(tId);
            // 将值赋给编辑表单
            $('#editForm').fillForm(node);
            $('#editForm [name="parentId"]').val(node.pId ? node.pId : "0");
            $('#editForm [name="url"]').val(node.rUrl);
            $('#editForm [name="icon"]').val(node.rIcon);
            console.log("属性组有："+node.groupnames);
            $('#editForm [name="editgrouplabeles"]').html(node.groupnames);
            $('#editForm [name="editgroupnames"]').val(node.groupnames);
            $(this).validator('validate');
            $('#editModal').modal('show');
        };

        remove = function (tId) {
            var treeObj = $.fn.zTree.getZTreeObj("dataTree");
            var node = treeObj.getNodeByTId(tId);
            $('#deleteForm').fillForm(node);
            $('#deleteForm [name="parentId"]').val(node.pId ? node.pId : "0");
            $('#deleteModal').modal('show');
        };
        var itemCatDtoList = [[${itemCatDtoList}]];
        var zNodes = [];
        for (var i in itemCatDtoList) {
            zNodes.push({
                id: itemCatDtoList[i].id,
                pId: itemCatDtoList[i].parentId,
                name: itemCatDtoList[i].name,
                parentIds: itemCatDtoList[i].parentIds,
                status: itemCatDtoList[i].up,
                groupnames: itemCatDtoList[i].groupnames,
                sortOrder: itemCatDtoList[i].sortOrder
            });
        }
        <!--定义ztree的配置参数，check必须要在data之前，否则不起作用，简单数据类型：使用id和pid来表示节点的父子保护关系-->
        var setting = {
            view: {
                showLine: false,
                showIcon: true,
                addDiyDom: addDiyDom,
                txtSelectedEnable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        /**
         * 自定义DOM节点
         */
        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 15;
            var liObj = $("#" + treeNode.tId);
            var aObj = $("#" + treeNode.tId + "_a");
            var switchObj = $("#" + treeNode.tId + "_switch");
            var icoObj = $("#" + treeNode.tId + "_ico");
            var spanObj = $("#" + treeNode.tId + "_span");
            aObj.attr('title', '');
            aObj.append('<div class="diy switch" style="width: 30%;"></div>');
            var div = $(liObj).find('div').eq(0);
            switchObj.remove();
            spanObj.remove();
            icoObj.remove();
            div.append(switchObj);
            div.append(icoObj);
            div.append(spanObj);
            var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
            switchObj.before(spaceStr);
            var editStr = '';
            editStr += '<div class="diy">' + (treeNode.status || '&nbsp;') + '</div>';
            editStr += '<div class="diy">' + (treeNode.groupnames || '&nbsp;') + '</div>';
            editStr += '<div class="diy">' + (treeNode.sortOrder || '&nbsp;') + '</div>';
            editStr += '<div class="diy">' + formatHandle(treeNode) + '</div>';
            aObj.append(editStr);
            $('[data-toggle="tooltip"]').tooltip({container: 'body'});
            $('[data-toggle="popover"]').popover();
        }

        /**
         * 查询数据
         */
        function query() {
            //初始化列表
            //初始化树
            $.fn.zTree.init($("#dataTree"), setting, zNodes);
            //添加表头
            var li_head = ' <li class="head"><a><div class="diy" style="width: 30%;">名称</div><div class="diy">状态</div><div class="diy">属性</div><div class="diy">排序</div><div class="diy">操作</div></a></li>';
            var rows = $("#dataTree").find('li');
            if (rows.length > 0) {
                rows.eq(0).before(li_head)
            } else {
                $("#dataTree").append(li_head);
                $("#dataTree").append('<li ><div style="text-align: center;line-height: 30px;" >无符合条件数据</div></li>')
            }
        }

        <!--绑定onclick函数-->
        function formatHandle(treeNode) {
            var $actionButtons = $('#actionButtons').clone();
            $actionButtons.find('.like').attr('onclick', 'like("' + treeNode.tId + '")');
            $actionButtons.find('.add').attr('onclick', 'createChild("' + treeNode.tId + '")');
            $actionButtons.find('.edit').attr('onclick', 'update("' + treeNode.tId + '")');
            $actionButtons.find('.delete').attr('onclick', 'remove("' + treeNode.tId + '")');
            if (treeNode.isParent == true) {
                $actionButtons.find('.delete').remove();
            }
            return $actionButtons.html();
        }
        //初始化数据
        query();

    })

    function addgroup(tag) {
        var appendstr = '';
         var gid,gname,htmlText;
         var obj = $('#'+tag+'groupnames option:selected');
        // console.log("拼接字符="+'#'+tag+'groupnames option:selected');
         gid = obj.val();
         gname = obj.text();
       // console.log("选择的节点id"+gid+",和值："+gname);
        if (groupJson.length == 0) htmlText=""
        else htmlText =  $("#"+tag+"grouplabeles").html();
        if (gid != "0") {
            if (htmlText.length == 0) htmlText = gname;
            else htmlText = htmlText + "," + gname;
            obj.remove();
            groupJson.push({
                id : gid,
                groupName : gname
            });
        }
        else{
            alert("请选择正确的属性");
            obj.remove();
        }

        console.log("label ="+htmlText+",json="+JSON.stringify(groupJson));
        $("#"+tag+"grouplabeles").html(htmlText);
        $("#"+tag+"groupJson").val(JSON.stringify(groupJson));
    }
</script>
</html>